<!--
 * @Description: 上传视频预览
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-09-29 16:12:37
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-10-08 15:00:43
 * @FilePath: /nhw/src/components/PrevVideo/index.vue
-->

<template>
  <div class="prev-video-container">
    <video :src="videoUrl" autoplay muted ref="video" />
    <!-- :playsinline="true" :webkit-playsinline="true" -->
    <div @click="play" class="mask">
      <Icon
        name="clear"
        size=".43rem"
        @click.stop="deleteVideo"
        v-if="control"
      />
    </div>
  </div>
</template>

<script>
import { Icon } from "vant";
export default {
  name: "PrevVideo",

  components: { Icon },

  props: {
    videoUrl: {
      type: String,
      required: true,
      default: "",
    },
    control: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    // blobUrl() {
    //   if (this.blob !== "") {
    //     window.URL.revokeObjectURL(this.blob);
    //   }
    //   const blob = this.dataURItoBlob(this.videoUrl);
    //   this.blob = blob;
    //   return window.URL.createObjectURL(blob);
    // },
  },
  data() {
    return {
      // blob: "",
    };
  },

  mounted() {
    console.log(this.$refs);
    this.$refs.video.addEventListener("loadeddata", (e) => {
      console.log(e);
      e.target.pause();
    });
  },
  destroyed() {
    // window.URL.revokeObjectURL(this.blob);
  },
  methods: {
    deleteVideo(e) {
      console.log(e);
      this.$emit("deleteVideo", e);
    },
    play() {
      const video = this.$refs.video;
      video.paused ? video.play() : video.pause();
    },
    // dataURItoBlob(base64Data) {
    //   var byteString;
    //   byteString = window.atob(base64Data.split(",")[1]);
    //   var mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
    //   var ia = new Uint8Array(byteString.length);
    //   for (var i = 0; i < byteString.length; i++) {
    //     ia[i] = byteString.charCodeAt(i);
    //   }
    //   var blob = new Blob([ia], {
    //     type: mimeString,
    //   });
    //   return blob;
    // },
  },
};
</script>

<style lang="less" scoped>
.prev-video-container {
  height: 150px;
  width: 150px;
  position: relative;
  overflow: hidden;
  margin: 0 10px;
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .van-icon {
    position: absolute;
    top: -7px;
    right: -7px;
    color: aliceblue;
    z-index: 99999;
  }
  video {
    height: 100%;
    width: 100%;
    background: #000;
    position: absolute;
  }
}
</style>